<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style type="text/css">
        .item {
            line-height: 36px;
        }
    </style>
</head>
<body>
<div class="layui-col-xs6 layui-col-xs-offset1" style="margin-top: 20px">
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <div class="">
                    <img th:src="@{${teacher.userUrl}}"
                         height="100px" width="100px" style="margin-left: 10px">
                </div>
                <div class="layui-form-item">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#xe67c;</i>修改头像</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="username" th:value="${teacher.username}" style="display:none;">
                <div class="layui-input item" th:text="${teacher.name}"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电子邮箱</label>
            <div class="layui-input-block">
                <!--                <div class="layui-input item" th:text="${teacher.email}"></div>-->
                <input type="text" id="email" th:value="${teacher.email}" placeholder="电子邮箱" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-block">
                <!--                <div class="layui-input item" th:text="${teacher.qq}"></div>-->
                <input type="text" id="qq" th:value="${teacher.qq}" placeholder="QQ" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信</label>
            <div class="layui-input-block">
                <!--                <div class="layui-input item" th:text="${teacher.wechat}"></div>-->
                <input type="text" id="wechat" th:value="${teacher.wechat}" placeholder="wechat" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <!--                <div class="layui-input item" th:text="${teacher.phone}"></div>-->
                <input type="text" id="phone" th:value="${teacher.phone}" placeholder="phone" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 12%;margin-bottom: 2%;">
            <div class="layui-col-xs6 layui-col-xs-offset3">
                <button style="width: 100%;" type="button" onclick="sub()" class="layui-btn layui-btn-radius">修改
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function sub() {
        var username = $("#username").val();
        var email = $("#email").val();
        var qq = $("#qq").val();
        var wechat = $("#wechat").val();
        var phone = $("#phone").val();
        $.post('update',
            {
                username: username,
                email: email,
                qq: qq,
                wechat: wechat,
                phone: phone
            },
            function (res) {
                if (res.code == "00000") {
                    alert("修改成功");
                } else {
                    alert(res.message);
                }
            },
            "json")
    }
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        upload.render({
            elem: '#test1'
            ,url: '/teacher/file'
            ,size:6000
            ,accept:'file'
            ,before: function(obj){
                this.data={"username": $("#username").val()}//携带额外的数据
            }
            ,done: function(res){
                //如果上传失败
                if(res.code =='00000'){
                    $('#image_address').text(res.data);//上传成功
                    return layer.msg('上传成功');
                }else{
                    return layer.msg(res.message);
                }
            }
            ,error: function(){
            }
        });
    });
</script>
</html>